<template>
  <div class="DownTop">
    <div class="down-header">
      <div class="down-header-content">
        <div class="down-header-content-left">
          <h3>在电脑上听</h3>
          <img src="./images/down01.png" alt="" />
          <div class="download">电脑端下载</div>
        </div>

        <div class="down-header-content-right">
          <div>
            <h3>在手机上听</h3>
            <img src="./images/down02.png" alt="" />
            <div class="download">手机端下载</div>
          </div>
        </div>
      </div>
    </div>
    <div class="down-body"></div>
  </div>
</template>

<script>
export default {
  name: "Download",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.DownTop {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .down-header {
    overflow: hidden;
    background-image: url("./images/bgcDown.png");
    background-position: center;
    background-size: 100%;
    .down-header-content {
      overflow: hidden;
      width: 1100px;
      padding-top: 80px;
      padding-bottom: 112px;
      margin: 0 auto;
      .down-header-content-left {
        width: 465px;
        float: left;
        overflow: hidden;
        h3 {
          font-size: 22px;
          color: #fff;
          width: 100%;
          text-align: center;
          margin-bottom: 21px;
          font-weight: 200;
        }
        img {
          width: 465px;
        }
        .download {
          margin: 0 auto;
          width: 300px;
          height: 65px;
          background-color: #ffffff;
          font-size: 30px;
          text-align: center;
          line-height: 65px;
          border-radius: 65px;
        }
      }
      .down-header-content-right {
        width: 520px;
        float: left;
        overflow: hidden;
        div {
          margin-left: 220px;
          h3 {
            font-size: 22px;
            color: #fff;
            width: 100%;
            text-align: center;
            margin-bottom: 21px;
            font-weight: 200;
          }
          img {
            width: 300px;
            height: 273px;
          }
        }
        .download {
          margin: 0 auto;
          width: 300px;
          height: 65px;
          line-height: 65px;
          background-color: #ffffff;
          font-size: 30px;
          text-align: center;
          border-radius: 65px;
        }
      }
    }
  }
}
</style>